import React, { Component } from 'react'
import { connect } from 'dva';
import { Button, message, Card } from 'antd';

interface Props {
  dispatch?: Function,
  details: {
    id: number,
    companyId: number
  },
  match: {
    params: {
      id: number
    }
  }
}

class ProblemDetail extends Component<Props, any> {
  constructor(props) {
    super(props);
    let groupData = props.groupData;
    this.state = {
      groupData
    };
  }

  componentWillReceiveProps(nextProps) {
    let groupData = nextProps.groupData;
    this.setState({
      groupData
    })
  }

  optionFn(data) {
    if(!data) {
      return null;
    }else if(!Array.isArray(data.itemList)){
      return null;
    }else {
      return (
        data.itemList.map((item, index) => (
          <p key={index}>{index + 1}、{item.context}</p>
        ))
      )
    }
  }

  render() {
    return (
      <>
        <div style={{'marginBottom': '30px'}}>
          {
            this.state.groupData.map((item, index) => (
              <Card
                key={index}
                title={item.name ? `${item.name} (${item.typeName})` : ''}
                style={{ width: '80%' }}
              >
                {
                  this.optionFn(item)
                }
              </Card>
            ))
          }
        </div>
      </>
    );
  }
}

export default ProblemDetail;


